/* * @Author: hhy * @Date: 2019-01-15 15:42:00 * @Last Modified by: hhy * @Last
Modified time: 2019-03-28 19:55:24 * @文件说明: 阿里巴巴-字体图标组件 */
<template>
  <router-link v-if="to" class="icon-font" :to="to" tag="span">
    <i class="iconfont" :class="i" :style="style" />
  </router-link>
  <i v-else class="iconfont" :class="i" :style="style" />
</template>

<script>
import { defineComponent, toRefs, reactive, computed } from "vue";
export default defineComponent({
  name: "icon-font",
  inheritAttrs: false,
  props: {
    i: {
      type: String,
      default: "icon-bianji",
    },
    fs: {
      type: String,
      default: "16",
    },
    color: {
      type: String,
      default: "c9",
    },
    cursor: {
      type: Boolean,
      default: false,
    },
    to: {
      type: String,
      default: "",
    },
  },
  setup(props) {
    const state = reactive({
      colorData: {
        blue: "#3398ff",
        grey: "#e4e7ed",
        orange: "#ee6869",
        green: "#29cc7a",
        c3: "#333",
        c6: "#666",
        c9: "#999",
      },
    });
    const style = computed(() => {
      return {
        fontSize: props.fs + "px",
        cursor: props.cursor ? "pointer" : "inherit",
        color: state.colorData[props.color] || props.color,
      };
    });
    return {
      ...toRefs(state),
      style,
    };
  },
});
</script>
<style lang="scss" scoped>
.icon-font {
  cursor: pointer;
  user-select: none;
}
</style>
